<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        #img{
            width: 0px;
            opacity: 0;
            /*透明度*/
        }
        #content{
            display: none;
        }
    </style>
</head>
<body>
<button type="button" id="btn1">显示内容</button>
<img src="img/star.gif" alt="" id="img">
<div id="content">
    <h3>姓名：星星</h3>
    <p>生日：未知</p>
    <p>简介：我**你个大**</p>
</div>
</body>
<script>
    $(function () {
        $('#btn1').bind('click',function () {
            //对图片创建动画 animate有两个属性
            $('#img').animate({//动画属性对象：#img
                width:150,//属性必须是css属性 只支持数值型 不支持字体颜色 默认px
                opacity:1,
                // 'border-radius':500
                borderRadius:500
            },{//动画选项
                duration:2000,//持续时间
                complete:function () {//完成时
                    //当前选中了图片作为对象
                    $(this).css('box-shadow','0px 0px 10000px #00925f');
                    $('#content').slideToggle(1000,function () {
                        $(this).children('h3').css('color','red');
                        if ($('#btn1').text() == '隐藏内容') {
                            $('#btn1').text('显示内容');

                            $('#img').animate({
                                width:0,
                                opacity:0,
                                'border-radius':0,
                            })

                        }else{
                            $('#btn1').text('隐藏内容');
                        }
                    })
                }
            })
        })
    })
</script>
</html>